import React, {PureComponent} from 'react';
import AlarmNode from "./components/AlarmNode";
import ws from "../../ws";
import {wsAlarmCountUrl as alarmWsUrl} from "../../api/request";


class Index extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            channelList: []
        }
    }

    componentDidMount = async () => {
        ws.addConnect(alarmWsUrl)
        ws[alarmWsUrl].onmessage = event => {
            this.setState({
                channelList: JSON.parse(event.data)
            })
            // console.log(111,JSON.parse(event.data));
        }

    }

    componentWillUnmount() {
        ws.deleteConnect(alarmWsUrl)
    }

    _toDetail = (channelId) => {
        return () => {
            this.props.history.push({pathname: `/Home/MonitoringDetail/${channelId}`});
        }
    }

    render() {
        const {channelList} = this.state
        return (
            <div>
                {
                    channelList.map((channel, index) => {
                        let disabledIndex = 999
                        return (
                            <div key={index}
                                 style={{
                                     background: '#fff',
                                     borderBottom: '1px solid #ccc',
                                     padding: '30px 60px ',
                                     display: 'flex',
                                     cursor: 'pointer'
                                 }}
                                 onClick={this._toDetail(channel.id)}
                            >
                                <div style={{fontSize: '30px', flex: '1'}}>{channel.channel_name}</div>
                                <div style={{display: 'flex', width: '550px'}}>
                                    {
                                        //如果节点没错误颜色为蓝色，如果有错误为红色，并且显示警告数。如果前一个节点有误，后面节点全部变灰色
                                        channel.levels_alarm_count.map((alarm, alarmIndex) => {
                                            let disabled = false //是否是无效节点
                                            if (disabledIndex == 999 && alarm.count > 0) {
                                                disabledIndex = alarmIndex
                                            }
                                            if (alarmIndex > disabledIndex) {
                                                disabled = true
                                            }
                                            return (
                                                <div style={{display: 'flex', alignItems: 'center'}} key={alarmIndex}>
                                                    <div style={{marginLeft: '20px'}}>
                                                        <AlarmNode
                                                            display={alarm.level_display}
                                                            disabled={disabled}
                                                            {...alarm}
                                                        />
                                                    </div>
                                                    <div style={{
                                                        height: '2px',
                                                        width: '40px',
                                                        background: alarm.count > 0 || disabled ? '#ccc' : 'rgb(63, 163, 254)',
                                                        marginLeft: '10px',
                                                        display: alarmIndex == channel.levels_alarm_count.length - 1 ? 'none' : 'block'
                                                    }}></div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>

                            </div>

                        )
                    })
                }
            </div>
        );
    }
}

Index.propTypes = {};

export default Index;
